<template>
<section class="todoapp">
<TodoHeader
@TaskName="hTaskname"
/>
<TodoMain 
:list="showList"
@hDel="Sdel"
@hChange="Change"
@changeAll="hChangeAll"
 />
<TodoFooter
:list="showList"
@Hclear="hhclear"
@changeType="htype"
/>
  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoFooter from './components/TodoFooter.vue'
import TodoMain from './components/TodoMain.vue'
export default {
components:{
  TodoHeader,
  TodoMain,
  TodoFooter
},
data(){
  return {
    //  list: [
    //   { id: 1, name: '吃饭', isDone: true },
    //   { id: 2, name: '睡觉', isDone: false },
    //   { id: 3, name: '打豆豆', isDone: true }
    // ],
    list:JSON.parse(localStorage.getItem('list') || '[]'),
    type:"all"
  }
},
methods:{
  // 删除 
  Sdel(id){
    console.log(id);
    const index = this.list.findIndex(item => item.id === id)
    this.list.splice(index,1)
  },
  // 修改任务表状态 
  Change(id){
    // console.log(id);
    const obj = this.list.find(item=>item.id === id)
    obj.isDone= !obj.isDone
  },
  hTaskname(Task){
      this.list.push({
        name:Task,
        id:Date.now(),
        isDone:false
      })
  },
  hhclear(){
    this.list=this.list.filter(item =>!item.isDone)
  },
  htype(TYPE){
    //  console.log(TYPE);
    this.type=TYPE
  },
  hChangeAll(val){
     this.list.forEach(item=>item.isDone = val)
    console.log(val);
  }
},
computed:{
  showList(){
    if(this.type === 'all'){
      return this.list
    }else if(this.type === 'active'){
      return this.list.filter(item => !item.isDone)
    }else if(this.type === 'completed'){
      return this.list.filter(item=> item.isDone)
    }
  }
},
watch:{
  list:{
    deep:true,
    handler(){
    localStorage.setItem('list',JSON.stringify(this.list))
    }
  }
}
}
</script>

<style></style>
